import React, { Component } from "react";
import { NavBar, Carousel, Flex } from "antd-mobile";
import SearchInput from "../searchInput/SearchInput";
import axios from "axios"
import { withRouter } from "react-router-dom"
import "./index.css";


class Index extends Component {
	state = {
		list: [],
		catitems: [],
		productData: [],
	}

	componentDidMount() {
		axios.get("https://www.linweiqin.cn/api/public/v1/home/swiperdata").then((res) => {
			this.setState({
				list: res.data.message
			})

		})

		axios.get("https://www.linweiqin.cn/api/public/v1/home/catitems").then((res) => {
			// console.log(res)
			this.setState({
				catitems: res.data.message
			})
		})

		axios.get("https://www.linweiqin.cn/api/public/v1/home/floordata").then((res) => {
			this.setState({
				productData: res.data.message
			})

		})
	}
	handleSwiperClick = (goods_id) => {
		console.log(this.props.history.push("/goodDetail/" + goods_id))
	}
	handleCatItemClick = (params) => {
		this.props.history.push("/category")
	}
	handleImgClick = (params) => {
		this.props.history.push("/goodList?"+"query='服装")

	}
	render() {
		return (
			<div className="yg-index">
				{/* 导航 */}
				<div className="yg-index-nav">
					<NavBar className="index-nav">优购商城</NavBar>
				</div>
				{/* 搜索框 */}
				<div className="yg-index-search">
					<SearchInput></SearchInput>
				</div>
				{/* 轮播图 */}
				<div className="yg-index-swiper">
					<Carousel
						autoplay={true}
						infinite
					>
						{this.state.list.map(val => (
							<div key={val.goods_id} className="yg-swiper-item" onClick={this.handleSwiperClick.bind(this, val.goods_id)}>

								<img
									src={val.image_src}
								/>
							</div>
						))}
					</Carousel>
				</div>
				{/* 分类 */}
				<div className="yg-index-catitems">
					<Flex>

						{this.state.catitems.map(val => (
							<Flex.Item key={val.name} className="fg-catitems-item" onClick={this.handleCatItemClick.bind(this)}>
								<img src={val.image_src} />
							</Flex.Item>
						))}
					</Flex>
				</div>
				{/* 商品列表 */}
				<div className="yg-index-productData">
					{this.state.productData.map(val => {
						return <div key={val.floor_title.image_src} className="productData-item">
							<div className="product-title">
								<img src={val.floor_title.image_src} alt="" />
							</div>
							<div className="product-image-list">
								{
									val.product_list.map(val => {
										return <div className="image-list-item" onClick={this.handleImgClick.bind(this)} key={val.image_src}>
											<img src={val.image_src} alt="" />
										</div>
									})
								}
							</div>
						</div>

					})}
				</div>

			</div >
		);
	}
}

export default withRouter(Index)